<template>
  <div class="table">
    <el-table
      border
      style="width: 100%"
      v-loading="loading"
      :data="listData"
      :height="tableHeight"
      :header-cell-style="headerStyle"
      @select-all="handleSelectAll"
      @cell-click="handleCell"
      @select="handleRadio"
    >
      <!-- 序号 -->
      <el-table-column v-if="isSort" label="序号" align="center" width="80">
        <template #default="scope">
          <span
            v-text="(page.pageNum - 1) * page.pageSize + (scope.$index + 1)"
          ></span>
        </template>
      </el-table-column>
      <!-- 
        type: https://element-plus.org/zh-CN/component/table.html#table-column-%E5%B1%9E%E6%80%A7
        label: 表头信息
        prop: 字段
        width: 宽度 默认自适应
        minWidth: 最小宽度
        maxWidth: 最大宽度
        align: 对齐方式
        fixed: 定位
        selectable: 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选[用于多选框]
        show-overflow-tooltip: true 当内容过长被隐藏时显示 tooltip. 默认不设置，自动换行
       -->
      <el-table-column
        v-for="(item, index) in columnsList"
        :key="index"
        :type="item.type ? item.type : ''"
        :label="item.label"
        :prop="item.prop"
        :width="item.width ? item.width : ''"
        :min-width="item.minWidth ? item.minWidth : ''"
        :max-width="item.maxWidth ? item.maxWidth : ''"
        :align="item.align"
        :fixed="item.fixed"
        :selectable="item.selectable"
        :show-overflow-tooltip="item.outHidden ? true : false"
      >
        <template #default="scope">
          <div>
            <span v-if="item.render" v-html="item.render(scope.row)"></span>
            <span
              v-else
              v-text="_FieldFormat(scope.row[item.prop], item.type || '')"
            ></span>
          </div>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        :width="operateWidth"
      >
        <template #default="scope">
          <el-button
            v-if="editIsNeed"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            size="small"
          >
            更新
          </el-button>
          <el-button
            v-if="deleteIsNeed"
            @click="handleDelete(scope.$index, scope.row)"
            size="small"
          >
            删除
          </el-button>
          <el-button
            v-if="downloadIsNeed"
            @click="handleDownload(scope.$index, scope.row)"
            size="small"
          >
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 (START) -->
    <div v-if="page.total">
      <el-pagination
        background
        :currentPage="page.pageNum"
        :page-size="page.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, prev, pager, next, jumper, sizes"
        :total="page.total"
        @size-change="handleSize"
        @current-change="handleCurrent"
      ></el-pagination>
    </div>
    <!-- 分页 (END) -->
  </div>
</template>

<script>
  import { FieldFormat } from '/@/utils/utils'
  export default {
    name: 'wmTable',
    computed: {
      // 操作是否需要
      operateIsNeed() {
        if (editIsNeed || deleteIsNeed || downloadIsNeed) return true
        return false
      },
    },
    props: {
      // 是否显示排序
      isSort: {
        type: Boolean,
        default: true,
      },
      // 表格数据
      listData: {
        type: Array,
        default: () => [],
      },
      // 表头列表
      columnsList: {
        type: Array,
        default: () => [],
      },
      // 头部样式
      headerStyle: {
        type: Object,
        default: {
          background: '#F8F0F0',
          color: '#222222',
        },
      },
      // 请求loading
      loading: {
        type: Boolean,
        default: false,
      },
      // 分页
      page: {
        type: Object,
        default: {
          pageNum: 1,
          pageSize: 10,
          total: 10,
        },
      },
      // 表格是否固定表头
      tableHeight: {},
      // 操作栏 宽度
      operateWidth: {
        type: String,
        default: 100,
      },
      // 编辑/更新 是否需要
      editIsNeed: {
        type: Boolean,
        default: false,
      },
      // 删除 是否需要
      deleteIsNeed: {
        type: Boolean,
        default: false,
      },
      // 下载
      downloadIsNeed: {
        type: Boolean,
        default: false,
      },
    },
    data() {},
    methods: {
      // 多选事件
      handleSelectAll(select) {
        console.log(select, '多选事件')
      },
      // 单选
      handleRadio(select) {
        this.$emit('handleRadio', select)
      },
      // 点击某条
      handleCell(row, col, cell, event) {
        // this.$emit('handleCell')
      },
      // 每页显示条目个数
      handleSize(value) {
        this.$emit('handleSize', value)
        console.log(value, '页数')
      },
      // 选择跳转页数
      handleCurrent(value) {
        console.log(value, '当前页')
        this.$emit('handleCurrent', value)
      },
      // 编辑
      handleEdit(index, row) {
        this.$emit('handleEdit', index, row)
      },
      // 删除
      handleDelete(index, row) {
        this.$emit('handleDelete', index, row)
      },
      // 下载
      handleDownload(index, row) {
        this.$emit('handleDownload', index, row)
      },
      // 字段级格式化
      _FieldFormat(value, type) {
        return FieldFormat(value, type)
      },
    },
  }
</script>

<style lang="scss" scoped>
:deep() {
  .el-pagination.is-background .el-pagination__sizes.is-last {
    margin: 0;
  }

  .el-pagination__classifier {
    margin-right: 8px;
  }
}
</style>
